<template>
	<view class="city">
		<change-header></change-header>
		<change-list :letter="letter" :city="city"></change-list>
		<change-alphabet @change="change" :city="city"></change-alphabet>
	</view>
</template>

<script>
	import changeHeader from '../../components/change-header.vue';
	import changeList from '../../components/change-list.vue';
	import changeAlphabet from '../../components/changeAlphabet.vue';
	export default {
		components:{
			changeHeader,
			changeList,
			changeAlphabet
		},
		data() {
			return {
			city:[],
			letter:''
			}
		},
		methods: {
			getCityInfo(){
				uni.request({
					url:'http://127.0.0.1:8000/city.json',
					success: (res) => {
						this.city=res.data.city
						// console.log(this.city)
					}
				})
			},
			change(res){
				// console.log(res)
				this.letter=res
				// console.log(this.letter)
			}
		},
		created() {
			this.getCityInfo()
		}
	}
</script>

<style>
.city{
	background-color: #000000;
	width: 100%;
	height: 100%;
}
</style>
